<template>
	<view>
		<view class="img">
			<image src="../../static/activation.png" mode="widthFix"></image>
		</view>
		<view class="input auto">
			<view class="borderbox textc colora fs36 fw900 pt60">请输入您的卡片信息进行激活</view>
			<view class="number auto dflex alc mt40">
				<input type="text" placeholder="请输入您的卡号" class="fs30 pl30"/>
			</view>
			<view class="number auto dflex alc mt50">
				<input type="password" placeholder="请输入您的卡密" class="fs30 pl30"/>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn textc white auto">
			下一步
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.img {
	width: 750rpx;
	height: 640rpx;
	image {
		width: 750rpx;
		height: 640rpx;
	}
}
.input {
	width: 690rpx;
	height: 464rpx;
	background: #f2f5f9;
	box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(65, 81, 219, 0.5);
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	margin-top: -170rpx;
	.number {
		width: 630rpx;
		height: 102rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(65, 81, 219, 0.25);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		& > input {
			width: 100%;
			height: 100%;
		}
	}
}
.btn{
	width: 690rpx;
	height: 100rpx;
	line-height: 100rpx;
	background: linear-gradient(90deg, #8092EB 0%, #4151DB 100%);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	position: fixed;
	bottom: 88rpx;
	left: 30rpx;
}
</style>
